<template>
	<view class="index-wrap">
		<view class="index-wxml">
			<view>
				<film-swiper @closeMask="closeMask" :slideToCode="slideToCode"></film-swiper>
				<view class="scroll-ads">
					<van-icon name="volume-o" color='color: #DD524D;' />
					<swiper autoplay="true" scroll-y vertical="true" circular :interval="4000" class="ads">
						<swiper-item v-for="(item,index) in adList" :key="index">
							<view class="ads-item">
								{{item}}
							</view>
						</swiper-item>
					</swiper>
					<view class="" @click="toMember">
						<text style="margin-right: 5rpx;">会员尊享</text>
						<van-icon name="arrow" />
					</view>
				</view>
				<film-session @getFutureFilm='getFutureFilm'></film-session>
			</view>
			<view class="loading-mask" v-show="showMask"></view>
		</view>

	</view>
</template>

<script>
	import {
		getCardList,
		getCinemaConfig
	} from '../../common/http/api.js';
	import FilmSwiper from '../../components/index/FilmSwiper.vue'
	import IndexHeader from '../../components/index/IndexHeader.vue'
	import FilmSession from '../../components/index/FilmSession.vue'
	export default {
		components: {
			FilmSwiper,
			IndexHeader,
			FilmSession
		},
		data() {
			return {
				name: '',
				showBtn: false,
				showMask: true,
				cinemaInfo: {},
				swiperList: [],
				chainsList: [],
				showTips: false,
				tipImg: '',
				titleBarHeight: '',
				statusBarHeight: '',
				adList: [],
				showHot: true,
				futureFilm: [],
				futureFilmIndex: null,
				changeColor: false,
				slideToCode: ''
			}
		},
		methods: {
			changeTab(v) {
				this.showHot = v
			},
			touchstart(index) {
				this.futureFilmIndex = index
			},
			touchend() {
				this.futureFilmIndex = null
			},
			toDetail(item) {
				// uni.navigateTo({
				// 	url: "../../pages/filmInfo/filmInfo"
				// })
				// this.$store.commit('setFilmInfo', item)

				this.slideToCode = item.FilmCode
				this.showHot = !this.showHot

				setTimeout(() => {
					this.slideToCode = ''
				}, 500)
			},
			toMember() {
				getCardList(uni.getStorageSync("openId")).then(res => {
					const {
						code,
						data
					} = res
					if (code === "000") {

						uni.navigateTo({
							url: "../cardList/cardList"
						})

					} else if (code === "001") {
						uni.navigateTo({
							url: "../openCard/openCardList"
						})
					}
				})
			},
			getFutureFilm(films) {
				this.futureFilm = films
				console.log(this.futureFilm);
			},
			getConfig() {
				getCinemaConfig().then(res => {
					const {
						data,
						code
					} = res;
					if (code == "SUCCESS") {
						this.cinemaInfo = data
						this.$store.commit("setCinemaConfig", data);
						// this.swiperList.push(data.picture1, data.picture2, data.picture3)
						for (let key in data) {
							if (key.includes('picture')) {
								this.swiperList.push(data[key])
							}
						}
						this.tipImg = data.homeImage
						this.adList = data.rollAds.split('|')

					}
				})
			},
			closeMask() {
				this.showMask = false;
				this.handleTipTime();
			},
			handleTipTime() {
				const time = parseInt(uni.getStorageSync('tipTime'));
				const currentTime = new Date().getTime()
				if (!time) {
					this.showTips = true;
					uni.setStorageSync('tipTime', currentTime)
					setTimeout(() => this.showTips = false, 10000)
				} else {
					const result = currentTime - time;

					if (result > 300000) {
						this.showTips = true;
						uni.setStorageSync('tipTime', currentTime)
						setTimeout(() => this.showTips = false, 10000)
					} else {
						this.showTips = false;
					}
				}
			},


		},
		onLoad(options) {
			if (options.cinemaCode) {
				uni.setStorageSync('cinemaCode', options.cinemaCode)
				uni.setStorageSync('currentCityName', options.currentCity)
			}
			if (options.filmCode) {
				this.slideToCode = options.filmCode
			}
			uni.showShareMenu({
				withShareTicket: true,
				menus: ["shareAppMessage", "shareTimeline"]
			})
			this.getConfig();

			uni.$once('sysHeight', data => {
				this.titleBarHeight = data.titleBarHeight
				this.statusBarHeight = data.statusBarHeight
			})
		},
		onShareAppMessage() {
			const cinemaCode = uni.getStorageSync('cinemaCode', cinema.cinemaCode)
			const currentCityName = uni.getStorageSync('cinemaCode', cinema.currentCityName)
			return {
				path: `/pages/index/index?cinemaCode=${cinemaCode}&currentCityName=${currentCityName}`
			}
		},
		onPageScroll(e) {
			if (e.scrollTop > 135) {
				this.changeColor = true
			} else {
				this.changeColor = false
			}
		}
	}
</script>

<style lang="scss">
	.coustom-navbar {
		display: flex;
		justify-content: center;
	}

	.future-films-box {
		position: absolute;
		z-index: 9;
		border-radius: 30rpx 30rpx 0 0;
		overflow: hidden;
		box-sizing: border-box;
		background-color: #fff;
		width: 100%;
		top: 160px;
	}

	.film-box {
		position: fixed;
		top: 300rpx;
	}

	.loading-mask {
		width: 100vw;
		height: 100vh;
		background-color: #f0f0f5;
		position: absolute;
		left: 0;
		top: 0;
	}

	.future-films {

		padding: 5rpx 40rpx 5rpx 40rpx;



		.film-info {
			display: flex;
			margin-bottom: 20rpx;

			.film-name {
				padding-top: 5rpx;
				font-size: 28rpx;
				margin-bottom: 15rpx;
			}

			.desc {
				font-size: 26rpx;
				color: #999;
				margin-bottom: 5rpx;
			}
		}

		.open-date {
			padding: 20rpx 0;
			font-size: 26rpx;
		}

		.film-img {
			width: 150rpx;
			height: 210rpx;
			margin-right: 20rpx;
			border-radius: 15rpx;
		}
	}

	.active-film {
		background-color: #f0f0f5;
	}

	.open-card-tip {
		display: flex;
		justify-content: space-between;
		padding: 10rpx 20rpx;
		background-color: #f0f0f5;
		font-size: 28rpx;
		color: #DD524D;


		view {
			display: flex;
			align-items: center;
		}

		text {
			margin: 0 15rpx;
		}
	}

	.tips {
		display: flex;
		flex-direction: column;
		align-items: center;
		border-radius: 15rpx;
		padding-bottom: 20rpx;

		image {
			width: 75vw;
			margin-bottom: 20rpx;
		}

		.confirm {
			width: 300rpx;
			font-size: 32rpx;
			background-color: #FB5868;
		}
	}

	.scroll-ads {
		display: flex;
		padding: 10rpx 30rpx;
		background-color: #f0f0f5;
		color: #DD524D;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;

		.ads {
			height: 60rpx;
			width: 60vw;
			margin-left: 20rpx;
			display: flex;
			align-items: center;

			.ads-item {
				height: 60rpx;
				font-weight: bold;
				display: flex;
				align-items: center;
			}
		}
	}
</style>